<template>
	<view class="page">
		<!-- 系统按主标题，次标题，英文标题的方式排列 -->
		<view class="main-title">
			五寨乡埔坪村
		</view>
		<view class="sub-title">
			数字博物馆
		</view>
		<view class="en-title">
			Digital Museum Of Puping Village, Wuzhai Township
		</view>
		<view class="btn" @click="Enter">
			{{ loadingStateText }}
		</view>
	</view>
</template>

<script>
	import { ref, reactive, watch, computed } from 'vue'
	import { useServerData } from '@/stores/digitalPlatform/useServerData'
	export default {
		setup () {
			let loadingStateText = ref("加载中");
			let loadingSession = null;
			let Enter = () => {
				if (!loadingSession) {
					return;
				}
				
				loadingSession.Enter();
			};
			
			let msg = useServerData("/pages/DigitalPlatform/FeatureContent");
			msg.then(g => {
				loadingStateText.value = g.loadingStateText.value;
				loadingSession = g;
			});
			
			return {
				loadingStateText,
				Enter
			};
		}
	}
</script>

<style lang="less">
	/* 使用LESS开发，可以优化开发效率 */
	.page {
		/* 全屏的写法如下，这种写法相较于width: 100%;和height: 100%;更优。这种写法允许内部元素垂直居中 */
		position: absolute;
		left: 0rpx;
		right: 0rpx;
		top: 0rpx;
		bottom: 0rpx;
		background: url(https://www.lin-home.com/static/Community/main-bg.jpg) 50% 50% / cover;
		
		.main-title {
			/* 他的内容只有文本，所以只需要写line-height属性即可。文本居中，所以也不需要写width */
			margin: 380rpx auto 0 auto;
		
			/** 文本本身是居中的，没有用的CSS属性需要全部去掉，以方便查看 */
			font-size: 90rpx;
			line-height: 100rpx;
			color: #fff;
			text-align: center;
		}
		
		.sub-title {
			/* margin-left: 165rpx; */
			/* margin-top: 49rpx; */
			margin: 49rpx auto 0 auto;
			
			/** 文本本身是居中的，没有用的CSS属性需要全部去掉，以方便查看 */
			font-size: 45rpx;
			line-height: 53rpx;
			color: #fff;
			text-align: center;
		}
		
		.en-title {
			/* margin-left: 134rpx;
			margin-top: 28rpx; */
			margin: 28rpx auto 0 auto;
			
			/** 文本本身是居中的，没有用的CSS属性需要全部去掉，以方便查看 */
			font-size: 25rpx;
			color: #fff;
			text-align: center;
			line-height: 30rpx;
		}
		
		.btn {
			/* 内部只有文本节点，高度即设定为文本的line-height不需要写height */
			display: block;
			
			position: absolute;
			bottom: 200upx;
			left: calc(50% - 131rpx);
			
			width: 262rpx;
			
			/* 透明底使用rgba即可 rgba(红，绿，蓝，不透明度) */
			background-color: rgba(255, 255, 255, .4);
			/* 圆角直接使用像素即可，不需要响应式 */
			border-radius: 8px;
			/* 虽然小程序看似无用，但微信电脑客户端访问小程序时，手型指针体验更好 */
			cursor: pointer;
			
			/** 文本1 */
			font-size: 30rpx;
			letter-spacing: 10rpx;
			text-align: center;
			line-height: 80.33rpx;
			color: #fff;
		}
	}
</style>